<template>
  <div style="display: flex; height: 60px; line-height: 60px">
    <div style="cursor: pointer">
      <el-icon style="font-size: 20px; vertical-align: middle" @click="collapse"
        ><Fold ref="d" v-show="isCollapse === false" /><Expand v-show="isCollapse === true"
      /></el-icon>
    </div>
    <div style="flex: 1; text-align: center; font-size: 34px">
      <span>欢迎来到仓库管理系统</span>
    </div>
    <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        {{ user.name }}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="toUser">个人中心</el-dropdown-item>
          <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem('User')),
    };
  },
  props: {
    isCollapse: Boolean,
  },
  methods: {
    toUser() {
      this.$router.push('/Home')
    },
    logout() {
      this.$confirm('您确定要退出吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '退出登录成功',
          });
          this.$router.push('/');
          sessionStorage.clear();
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出登录',
          });
        });
    },
    collapse() {
      this.$emit('doCollapse');
    },
  },
  created(){
    this.$router.push('/Home')
  }
};
</script>
<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
